<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS learning</title>
    <style>
        body {
            width: 70%;
            padding: 0 15%;
        }

        /* p {
            text-indent: 2rem;
        } */
    </style>
</head>

<body>
    <h1>选择器</h1>
    <h2>基本规则</h2>
    <p>css的一个核心特性就是可以向一组元素应用某些规则</p>
    <p>基本规则的组成是由：选择器（selector）和声明块（declaration block），声明块是由多个声明组成的，每个生命都是一个属性一值对（property-value）,
        属性值对之间需要用; 隔开， 对于每一个属性的值 可以存在多个关键字，关键字之间需要用空格隔开 margin: 15px 10px
    </p>
    <h2>分组(包括对选择器的分组，也包括对声明的分组)</h2>
    <p>常见的选择器</p>
    <h3>通配选择器</h3>
    <p>这个选择器和文档语言中的所有元素名匹配。如果规则没有显示指定选择器，则可以认为是通配选择器</p>
    <p>模式: *</p>
    <p>示例 *{color:red}</p>
    <h3>类型选择器（元素选择器）</h3>
    <p>这个选择器和文档语言中的一个元素名匹配。该元素的每一个实例都与之匹配</p>
    <p>模式: element1</p>
    <p>示例 p{font-size:1em}</p>
    <h3>后代选择器</h3>
    <p>后代选择器允许创作人员根据元素的状态(即作为另一个元素的后代)来选择该元素。与之匹配的元素可以使祖先元素的子元素，孙元素，曾孙元素等等</p>
    <p>模式:element1 element2</p>
    <p>示例 body h1{font-size:200%}</p>
    <h3>子元素选择器</h3>
    <p>比后代选择器更严格，只选择子元素</p>
    <p>模式: element1 > element2</p>
    <p>示例 div > P{color:cyan}</p>
    <h3>相邻兄弟选择器</h3>
    <p>允许开发人员选择元素的下一个相邻兄弟，不包括该元素之前的兄弟,元素之间的文本会省略，只考虑文档树中的元素及其位置</p>
    <p>模式: element1 + element2</p>
    <p>示例: table + p {margin-top: 2.5em}</p>
    <h3>类选择器</h3>
    <p>用于选取有特定类值的元素，类值名必须跟在点号后面。多个类值可以连在一起。如果类值前没有元素，这个选择器将和所有包含该值的元素匹配</p>
    <p>模式: element1.className1 element2.className1.className2</p>
    <p>示例: p.urgent{color:red} p.urgent.warning{color:cyon}</p>
    <h3>ID选择器</h3>
    <p>用于选择有某个或特定ID值的元素，ID值必须跟在一个#之后.如果类值前没有元素，这个选择器将和所有包含该值的元素匹配</p>
    <p>模式:element1#idname</p>
    <p>示例: h1#page-title{font-size:200%}</p>
    <h3>简单属性选择器</h3>
    <p>允许根据属性的存在来选择元素，不关心属性的值时什么</p>
    <p>模式: element[attr]</p>
    <p>示例：a[rel]{border-bottom: 3 double gray}</p>
    <h3>具体属性选择器</h3>
    <p>根据属性的具体值来选择元素,必须是完美匹配，例如下面的class的例子，元素的class必须完全等于urgent，不能多也不能少</p>
    <p>模式: element[attr='value']</p>
    <p>示例: a[rel='Home']{font-weight:bold} p[class='urgent']{}</p>
    <h3>部分属性值选择器</h3>
    <p>允许根据属性值的一部分选择元素，有的属性可能存在多个值，例如class</p>
    <p>模式：element1[attr~='value']</p>
    <p>p[class~='warning']{background:'yellow'}</p>
    <h2>伪类和伪元素</h2>
    <p>会根据某种条件而不是文档结构向文档中的默写部分应用样式，而且无法通过研究文档的标记准确判断出采取何种方式来应用样式</p>
    <h3>伪类选择器</h3>
    <p>拿a标签作为例子，a有两种类型，已访问的和未访问的，这些类型都称作伪类(pseudo-class), 使用这些伪类的选择器都是伪类选择器(pseudo-class selector)</p>
    <p>CSS2定义了两个伪类，被称为超链接 link 和 visited</p>
    <ul>
        <li>:link指向了所有作为超链接(即有href属性)并未访问的锚</li>
        <li>:visited执行了所有已经访问的锚</li>
    </ul>
    <p>Css3定义了三个伪类，被称为动态伪类 foucs hover active</p>
    <ul>
        <li>:focus：指向所有拥有输入焦点的元素，可以接受键盘输入或者能以某种方式激活的元素</li>
        <li>:hover: 指向鼠标指针停留的元素，如果指针停留在一个超链接，那么a:hover就会指示这个超链接</li>
        <li>:active: 指向被用户激活的元素，例如鼠标停留在一个超链接，点击鼠标就会变成active，点击完之后会变成visited</li>
    </ul>
    <p>css还定义了一些静态伪类 first-child (选择一个标签，且这个标签是他所有兄弟节点中的第一个，即父元素的第一个节点)</p>
    <ul>
        <li>:first-child选择第一个子元素 <br>
            p:first-child注意该元素是选中了讲p作为第一个元素的所有元素，而不是在p元素下寻找第一个子元素 <br>
            示例 div ul li:first-child 可以选择div 中的ul中li， 选中的li是ul下的第一个元素
        </li>
    </ul>
    <h3>伪元素选择器</h3>
    <p>常用的两个是first-letter和first-line用于执行元素内的第一个子母和第一行内容</p>
    <h4>伪类伪元素的区别</h4>
    <blockquote>The pseudo-class concept is introduced to permit selection based on information that lies outside of the
        document tree or that cannot be expressed using the other simple selectors.</blockquote>
    <p>伪类的引入提供了更好的选择机制，该机制不是基于文档树的结构，实现了通过之前的简单选择器不能实现的选择</p>
    <blockquote>
        Pseudo-elements create abstractions about the document tree beyond those specified by the document language. For
        instance, document languages do not offer mechanisms to access the first letter or first line of an element's
        content. Pseudo-elements allow authors to refer to this otherwise inaccessible information. Pseudo-elements may
        also provide authors a way to refer to content that does not exist in the source document (e.g., the ::before
        and ::after pseudo-elements give access to generated content).
    </blockquote>
    <p>伪元素提供了由文档语言表明的文档树之上的抽象，例如文档语言无法获取一个元素内容的第一个元素或者第一行，通过伪元素可以实现。伪元素还给开发者提供了一种指向源文档中并不存在的内容的方式，即::before和::after</p>
    <p>伪类其实是弥补了CSS选择器的不足，用来更方便地获取信息。而伪元素本质上是创建了一个虚拟容器(元素)，我们可以在其中添加内容或样式。</p>
    <p>在CSS3中，伪类用单冒号:表示；而伪元素用双冒号::表示。一个选择器可以同时使用多个伪类(但有的伪类会互斥)；而一个选择器只能同时使用一个伪元素(未来的版本可能会支持多伪元素)。</p>
    <h1>结构和层叠</h1>
    <h2>特殊性</h2>
    <p>元素有多个属性的冲突声明时，最高特殊性的声明会胜出</p>
    <ul>
        <li>ID属性选择器 特殊性 0100</li>
        <li>类选择器和属性选择器，以及伪类选择器 特殊性 0010</li>
        <li>元素和伪元素选择器 特殊性 0001</li>
        <li>结合符和通配符不做任何贡献</li>
        <li>内联属性的赋值 特殊性 1000</li>
        <li>设置了important的声明被称作重要声明，非重要声明之间使用特殊性来判断生出，但是重要声明和非重要声明相比总会获胜,这不再是特殊性，而且显示权重比较高</li>
    </ul>
    <h2>继承性</h2>
    <p>基于继承机制，样式不仅应用于指定样式，还应用于子元素</p>
    <p>继承是css的基础内容之一，一般不用去必要考虑，但是有几点需要注意</p>
    <ul>
        <li>有些属性不能继承，往往基于一些简单的常识。大多数的框模型属性都不能继承，例如外边距，内边距，背景和边框. <br>
            继承的值并没有特殊性，即使是0的特殊性也没有，可以参考下边的这个例子
            <!-- <h1 id='page'>Market <em>central</em> </h1>
                <p>welcome to dsfwer nhfe</p>
                <style>
                    * {
                        color:gray
                    }
                    h1#page{
                        color: black
                    }
                </style> -->
        </li>
    </ul>
    <h2>层叠</h2>
    <p>CSS（层叠样式表）就是让样式层叠在一起，通过结合特殊性和继承性来做到</p>
    <p>层叠规则:</p>
    <ol>
        <li>找到所有的规则，规则都包含一个与一个给定元素匹配的选择器</li>
        <li>按显示权重，针对一个元素的所有声明进行排序，有important的声明比没有的高;按来源，针对一个元素的所有声明进行排序，author (程序员编写)> reader（浏览用户） > user
            agent（浏览器默认样，但是有important的reader比有important的author要高，举例就是可以在chrome中直接修改查看效果</li>
        <li>按特殊性,针对声明排序，特殊性越高，权重越大</li>
        <li>按出现顺序，针对声明排序，越靠后，权重越大</li>
    </ol>
    <p>针对于后三条原则加以详述</p>
    <h3>按权重和来源排序</h3>
    <p>在声明权重的时候有一个排序, 程序员其实只需要考虑前四个级别</p>
    <ol>
        <li>读者的重要声明</li>
        <li>创作人员的重要声明</li>
        <li>创作人员的正常声明</li>
        <li>读者的正常声明</li>
        <li>用户代理声明</li>
    </ol>
    <h3>按特殊性排序</h3>
    <p>计算特殊性的值，然后根据大小添加样式</p>
    <h3>按出现的先后顺序排序</h3>
    <p>在有一些情况下，特殊性是一样的，我们需要按照先后顺序，重要的一点事a的伪类选择器添加样式</p>
    <p>因为a:link, a:visited, a:hover, a:active都是享有相同的特殊性都是 0011, 元素+伪类，所以当点击一个超链接的时候link, hover, active三种
        状态都被触发，定义时候的先后顺序就尤为重要，常用的就是link,hover,active, 同时一个a标签的状态只有点击过和没点击过，如果放在hover之后，那么
        hover的状态永远不会出线，所以link和visited都放在hover之前，所以最常用的定义顺序就是，link, visited, hover, active (即LVHA)
    </p>
    <h1>值和单位</h1>
    <h2>Keywords, string and other text values</h2>
    <h3>global keywords</h3>
    <ul>
        <li>inherit: (值和父元素的值相同)The keyword inherit makes the value of a property on an element the same
            as the value of that property on its parent element</li>
        <li>initial: (设置为初始值，每一个属性其实都有自己的初始值)The keyword initial sets the value of a property to the defined initial
            value,
            which in a way means it “resets” the value. </li>
        <li>unset:(如果属性可继承，那么就等同于inherit，否则等同于initial)The keyword unset acts as a universal stand-in for both inherit
            and ini
            tial</li>
    </ul>
    <h3>url</h3>
    <p>css中引入url的正确语法: url(protocol://server/pathname)</p>
    <h2>distance</h2>
    <h3>Absolute length units绝对长度单位</h3>
    <ol>
        <li>inches(in)</li>
        <li>centimeters(cm)</li>
        <li>millimeters(mm)</li>
        <li>quarter-millimeters(p)</li>
        <li>points(pt):打印机常用</li>
        <li>picas(pc)</li>
        <li>pixel(px)</li>
    </ol>
    <p>网页的展示取决于屏幕大小和分辨率大小，所以以上的单位不建议使用，除非你知道会在何种环境下使用</p>
    <h3>relative length units 相对长度单位</h3>
    <ol>
        <li>em: “em” is defined to be the value of font-size for a given font. In theory, one em is equal to the width
            of a lowercase m in the font used</li>
        <li>ex: In theory, one ex is equal to the height of a lowercase x in the font used</li>
        <li>rem: the rem unit is based on declared font size, using the root element(html)</li>
        <li>ch: </li>
        <li>vw: (Viewport width unit)divided by 100. Therefore, if the viewport is 937 pixels wide, 1vw is equal to
            9.37px</li>
        <li>vh:(Viewport width unit)</li>
        <li>vmin:(Viewport minimum unit) 1000px宽 500px高 那么1vmin是5px</li>
        <li>vmax:(Viewport maximum unit) 1000px宽 500px高 那么1vmin是10px</li>
    </ol>
    <h2>calculation values</h2>
    <p>我们可以使用calc()函数进行长度的计算，可以计算长度，时间，频率，角度，时间，百分比，数字和整数</p>
    <h2>attribute values</h2>
    <p>针对一些css的属性，有时候需要用html的属性值，例如 p::before {content: "[" attr(id) "]";} 会在所有p段落前加上p标签的id值 &lt; p id="leadoff" &gt;
        This is the first paragraph. &lt;/p &gt; 会变成 [leadoff]This is the first paragraph. </p>
    <h2>color</h2>
    <p>我们有148种已定义的颜色，还有RGB,RGBA,HSL和HSLA 等不同方式定义颜色</p>
    <p>我们还有两个color的关键字，可以用在填写颜色的地方，他们是transparent和currentColor(copy color属性的值)</p>
    <h2>angles</h2>
    <p>我们有四种方式定义角度</p>
    <ul>
        <li>deg, 360组成一圈,eg 270 deg</li>
        <li>grad, 400组成一圈, eg 300 grad</li>
        <li>rad, 2π组成一圈, eg0.785 rad</li>
        <li>turn, 1表示一圈，在制作动画旋转的时候尤其有用,10turn表示旋转10圈</li>
    </ul>
    <h2>time and frequency</h2>
    <p>a[href] {transition-duration: 2.4s;} 主要有两个单位s和ms</p>
    <p>h1 {pitch: 128hz;} 频率主要有hz</p>
    <h2>position</h2>
    <h2>custom values</h2>
    <pre>
html {
    --alison: #639;
    --david: #AEA;
    }
    h1 {color: var(--alison);}
    </pre>
    <p>在html内中声明了一个变量，自定义变量需要--开头，在调用的时候通过var关键字，区分大小写</p>
    <h1>字体</h1>
    <h2>字体系列 font-family</h2>
    <p>有五种通用字体</p>
    <ol style="font-size:18px">
        <li style="font-family: serif">serif：成比例有上下短线,短线指的是字符比划末端的装饰，例如f和l的小尾巴</li>
        <li style="font-family: sans-serif">sans-serif：成比例没有上下短线</li>
        <li style="font-family: monospace">monospace：不成比例，每个字符的长度基本相同</li>
        <li style="font-family: cursive">cursive:模仿人的手写体</li>
        <li style="font-family: fantasy;">fantasy:无任何特征定义</li>
    </ol>
    <p>注意font-family字体属性，如果字体名有空格，需要使用引号将字体名括起来，例如 'Times New Roman'</p>
    <h2>字体加粗 font-weight</h2>
    <p>通过设置font-family也可以实现加粗的效果例如TimesBold</p>
    <p>关键字:100-900, 100-400反映了较细变细， 500，600对应较粗， 700，800，900对应了很粗的字体</p>
    <p>400对应了normal，700对应了bold</p>
    <h2>字体大小 font-size</h2>
    <h2>字体风格 font-style</h2>
    <ul>
        <li style="font-style: normal">使用normal的文本</li>
        <li style="font-style: italic">使用italic的文本，斜体</li>
        <li style="font-style: oblique">使用oblique的文本，倾斜文本</li>
    </ul>
    <p>italic和oblique的区别:他们都是让字体具有倾斜的效果，italic是字体自带的斜体属性，oblique是使字体向右倾斜。但是，并不是所有字体都具有斜体的样式，对于那些没有斜体样式的字体来说，使用italic是没有效果的，此时就可以利用oblique代替italic来实现字体倾斜的效果啦。
    </p>
    <h2>字体变形 font-variant</h2>
    <ul style="font-size:18px">
        <li style="font-variant: normal">使用normal的文本</li>
        <li style="font-variant: small-caps">使用Small-caps的文本，使用小型大写字母文本</li>
    </ul>
    <p>font主要有5个属性:font-family, font-weight, font-size, font-style, font-variant，
        其实还有另外一个属性line-height，虽然他是一个text属性而不是font属性</p>
    <p>简写font属性: font-style | font-variant | font-weight | font-size | line-height | font-family</p>
    <p>可以使用关键字给font属性添加设置:</p>
    <ul style="font-size:18px">
        <li style="font:caption">caption:有标题的空间</li>
        <li style="font:icon">icon：对图标添加标签</li>
        <li style="font:menu">menu：用于菜单，即下拉菜单列表</li>
        <li style="font:message-box">message-box:用于对话框</li>
        <li style="font:small-caption">用于对小控件添加标签</li>
        <li style="font:status-bar">用于窗口状态条</li>
    </ul>
    <h1>文本属性</h1>
    <p>首先的是区分文本和字体:文本就是内容，而字体用于显示这个内容</p>
    <h2>文本缩进 text-indent</h2>
    <p>有很多种实现方式，有的网站在文本前放一个透明图形，有的网站采用完全非标准的spacer标记 例如 &nbsp</p>
    <p>text-indent只用于块级元素，而不能用于行内元素，行内元素通过设置内边距和外边距实现缩进</p>
    <h2>水平对齐 text-align</h2>
    <p>主要有三个值:left,right,center, 新增的justfy可以将内容平均分配在一行之内</p>
    <h2>inline alignment 行内对齐</h2>
    <h3>the height of lines</h3>
    <p>line-height指的是不同文本基线之间的距离，而不是字体的大小</p>
    <h4>一行的组成部分</h4>
    <img src="./images/constructureOfAline.png" alt="constructuing a line">
    <p>line-height实际上控制的是leading 行间距</p>
    <h4>assign values to line-height</h4>
    <p>一般来说user agent设置的是1.2倍的font-size</p>
    <h4>line height and inheritance</h4>
    <p>关于line height设置值的时候有一个问题，line height是可以继承属性，如果从父亲元素继承过来的line height是10px，而子元素的font-size大于10px
        会导致显示的时候出现重叠，一个解决方法就是使用数字作为factor，line-height:1.5，表示line-height是当前元素的font-size的1.5倍，而不用继承方法
    </p>
    <h3>vertically align text</h3>
    <p>vertical align 属性只适用于行内元素和可置换元素，例如image和form input</p>
    <p>vertical align有8个可选值， baseline (the default value), sub, super, bottom, text-bottom, middle, top, and text-top.
    </p>
    <h3>word spacing and letter spacing</h3>
    <p>word spacing设置字间距， letter spacing设置字母间距</p>
    <h4>spacing and alignment</h4>
    <p>word-spacing可能会受到text-align属性的影响，如果text-align设置为justify，那么文字会平均分配，但是如果显式设置了spacing的值，这种情况就不会发生</p>
    <h3>text transformation</h3>
    <p>可以控制文字的大小写</p>
    <h3>text decoration</h3>
    <p>文本装饰，设置上划线，下划线，删除线</p>
    <h3>text shadow</h3>
    <p>文本阴影，主要三个值 颜色 水平偏移 和垂直偏移量 e.g. text-shadow: green 5px 0.5em;</p>
    <h3>white-space</h3>
    <p>设置了处理字符间和行间whitespace的方式，默认是normal，即省略每行多余的whitespace，将多个whitespace转化为一个</p>
    <p>设置为pre的时候，和使用pre标签一样，保持原有文本的格式；设置为nowrap的时候，文本不会换行;设置为pre-wrap，保留换空白符，正常换行；设置为pre-line，保留换行符，合并空白符</p>
    <p style="white-space: nowrap;">This paragraph is not allowed to wrap,
        which means that the only way to end a line is to insert a line-break
        element. If no such element is inserted, then the line will go forever,
        forcing the user to scroll horizontally to read whatever can't be
        initially displayed <br />in the browser window.</p>




    <h1>Basic visual formatting</h1>
    <h2>Basic box 盒子模型</h2>
    <h3>A quick refresher</h3>
    <dl>
        <dt>normal flow</dt>
        <dd>从左到右，从上到下的西文文本渲染 和相似的html文档的文本布局渲染 联合称为normal flow. 一个元素脱离normal flow的方法有
            floated，positioned或者是放于一个flexible box或grid 布局元素中</dd>
        <dt>nonreplaced element</dt>
        <dd>元素的内容存在于文档流中的的元素，例如p</dd>
        <dt>replaced element</dt>
        <dd>元素冲淡了一个占位的作用，例如img</dd>
        <dt>root element</dt>
        <dd>根元素，在html文档当中，这个元素就是html标签</dd>
        <dt>block box</dt>
        <dd>块盒子在normal flow中垂直叠加，任何元素都可以用来创建一个块盒子，通过设置display:block</dd>
        <dt>inline box</dt>
        <dd>行内盒子不会在盒子前后创建换行，通过设置display:inline</dd>
        <dt>inline-block box</dt>
        <dd>行内块壳子，对内表现是块盒子，对外表现是行内盒子</dd>
    </dl>
    <p>还有一些其他的盒子模型，包括table-cell boxes，因为这些盒子很复杂 本身就需要一本书来解释，尽量不使就好了</p>
    <h3>Containing block</h3>
    <p>the containing block forms from the content edge of the nearest ancestor that generated a list item or block box
    </p>
    <p>容器块由最近的祖先模块的内容区域生成，且这个祖先有一个list元素或者块元素，html是最初是的容器块</p>
    <h2>altering element display</h2>
    <h3>changing roles 改变角色</h3>
    <p>需要注意的是，改变元素的display属性并不能改变他们内在的本质，换句话说，一个p标签创建了一个inline box并不意味着他就是一个行内元素</p>
    <p>块元素可以包含行内元素，但是反过来往往不能，display只是改变了他们的展示方式，但是不能改变行内元素不能放块元素的本质</p>
    <h3>block boxes</h3>
    <p>box-sizing:适用于一切接受height和width值的元素，主要是块元素，不过也同样适用于行内元素例如img，和inline-block元素</p>
    <p>box-sizing决定了height和width的组成是什么，默认情况下width只包含content area，设置为border-box后，width包含content area，padding和border</p>
    <p>this property is how you change what the width and height values actually do</p>
    <p>content-box The width and height properties (and min/max properties) includes only the content.</p>
    <p>border-box The width and height properties (and min/max properties) includes content, padding and border</p>
    <p>如果对width设置百分比的时候，相对的值永远是父元素的内容区域的大小，和父元素的width大小不一定相同，因为父元素是content-box，content
        area和width的长度相同，如果父元素是padding-box那么content area和width的值不同</p>
    <h3>horizontal formatting</h3>
    <p>水平方向格式化通常比我们想想的要复杂，因为box-sizing</p>
    <p>外部元素的content area的宽度，等于子元素的content area + padding + border + margin</p>
    <p>上边的原则不会变，永远是以父元素的内容区域为基准，改变display只是改变了当前元素的width组成，是否包含padding和border</p>
    <h3>horizontal property</h3>
    <p>7个水平属性包括, margin-left, border-left, padding-left, width, padding-right, border-right, margin-right</p>
    <p>其中只有3个值可以设置为auto，包括width,margin-left和margin-right，其他的四个属性必须设置值或者默认为0</p>
    <h3>using auto</h3>
    <p>有一种情况，当padding,border保持默认为0，width,margin-left和margin-right设为固定值，但是加起来的width不等于父元素的content width，
        这种情况下属于过度限制，margin-right的值会被强制设成auto。事实上，不仅是这种情况，当出现任何过度限制的情况下,margin-right都会被
        设置成auto来满足 7个属性的和等于父元素content area宽度的等式
    </p>
    <h3>more than one auto</h3>
    <p>如果两个margin是auto,且父元素子元素的width固定，那么子元素会被居中显示</p>
    <p>如果是width和一个margin设为autoz，设置了一个margin为固定值，那么设为auto的margin值会自动转为0，width长度会填满剩余区域</p>
    <p>如果三个值都是auto呢，那么margin值会被设置为0，width值会填满containing block</p>
    <p>水平方向的padding，margin不会合并</p>
    <h3>negative margin</h3>
    <p>margin可以设置为负值来实现某些有趣的效果，但是padding，border和width永远不可以设置为负值</p>
    <h3>percentages</h3>
    <p>当7属性中，有不同的赋值方式，百分比，长度值等等，会有一些tricky的事情发生，margin-right总会处理到位</p>
    <p>border不接受百分比</p>
    <h3>replaced elements</h3>
    <p>可替换元素比不可替换元素甚至更好管理，只有一点不同，例如对于img来说，如果width设置成auto的话，那么img的width默认就是图片的大小</p>
    <p>图片的height会根据width的变化同比例变化，如果设置了固定值，那就会按照固定值显示</p>
    <h3>vertical formatting</h3>
    <p>默认等于可见元素加起来的高度，可以设置固定值，如果大于子元素，会出现padding的效果，如果小于，会出现overflow的默认滚动效果</p>
    <h3>vertical property</h3>
    <p>同样是由7个属性组成, margin-top, border-top, padding-top, height, padding-bottom, border-bottom, margin-bottom</p>
    <h3>percentage height</h3>
    <p>当margin-top和margin-bottom设置为auto的时候，他们会自动等于0，所以不能通过设置auto的方式达到垂直居中的效果</p>
    <p>在这种情况下，一种比较的方式就是，显式设置margin-top和margin-bottom的值，使他们相等，同时给height赋值</p>
    <p>但是如果父节点的height没有设置的话，percentage设为auto会自动转为0，因为默认来说父元素的height是子元素累加而来，如果不提前设定好，
        而子元素想用percentage设置高度的话，是找不到依据的
    </p>
    <div style="height: 6em;">
        <p style="height: 50%">Half as tall</p>
    </div>
    <h3>collapsing vertical margins</h3>
    <p>垂直margin会有合并的效果，当negative margin合positive margin相遇时，不会合并，而是进行想加减</p>
    <h2>inline elements</h2>
    <h3>line layout</h3>
    <h4>inline box 和 line box：行内框和行框</h4>
    <p>行内框的大小等于内容区+行间距，但是行间距不适用于可置换元素，所以如img元素，他的行内框就是内容区的大小</p>
    <p>行框的大小取决于该行内最高和最低的行内框</p>
    <h4>inline formatting</h4>
    <p>设置line height对于块元素没有影响，但是对块元素下的行内元素有影响</p>


    <h1>padding, borders, outlines and margins</h1>
    <h2>basic element boxes</h2>
    <h3>weight and height</h3>
    <p>可以用于所有元素除了不可替换的行内元素，tables rows and row groups，换句话说使用于所有的块级元素和img，以及input元素</p>
    <h2>padding</h2>
    <h3>replicating values</h3>
    <p>赋值的顺序是上右下左</p>
    <h3>percentage values</h3>
    <p>百分比值的计算会基于父元素的内容区域的宽度, e.g. 10% 将会统一取到父元素的内容区域的宽度10%，而不是说横向取width的10%，纵向取height的10%，</p>
    <h2>borders</h2>
    <h2>outlines</h2>
    <h2>margins</h2>
    <h1>colors backgrounds and gradients</h1>
    <h2>colors</h2>
    <p>colors分为foreground color 和background color。 foreground主要指得是text的颜色和border的颜色</p>
    <h3>foreground colors</h3>
    <p>color会设置text的颜色，同时也会设置border的颜色，如果需要设置border为不同的颜色，通过border-color可以改写，color可继承属性</p>
    <h2>backgrounds</h2>
    <p>background是由content box和padding区域一起组成的</p>
    <h3>background colors</h3>
    <p>background color是不可以继承的，默认值是transparent，很好理解，如果一个元素没有背景颜色，那么就应该是transparent所以可以看到祖先节点的背景</p>
    <h3>background clip</h3>
    <p>限制background填充的区域，默认值时border-box(content area+ padding + border)，还有content-box(content area)，padding-box(content
        area+ padding)</p>
    <p>还可以设置background clip为text，通过设置color为transparent,通过这种方式可以给文本添加效果</p>
    <div class="container">
        <h1>Image Masking</h1>

        <h2>MASKING TEXT EXAMPLE</h2>
    </div>
    <style>
        .container h2 {
            font-family: 'Open Sans', sans-serif;
            font-size: 80px;
            font-weight: 800;
            line-height: 60px;
            background-image: url(https://2.bp.blogspot.com/-pKFE-5ysj68/TkjG9DvLB4I/AAAAAAAAEoM/rDKiHkvbC8o/s1600/Abstract_Wallpaper_8.jpg);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        .container h1 {
            font-size: 32px;
            color: #444;
            font-family: Source Sans Pro, Arial, sans-seirf;
        }
    </style>
    <h3>background-image</h3>
    <p>插入背景图片，默认会tile 平铺显示</p>
    <h3>background-position</h3>
    <p>背景图片的位置</p>
    <h3>background-repeat</h3>
    <p>背景图片的重复方式</p>
    <h3>background size</h3>
    <p>修改填充的背景图片大小</p>
    <h3>background简写方式</h3>
    <pre>
background-color: white;
background-image: url(yinyang.png);
background-position: top left;
background-repeat: repeat-y;
background-attachment: fixed;
background-origin: padding-box;
background-clip: border-box;
background-size: 50% 50%;
</pre>
    <h2>gradients</h2>
    <p>渐变，也是一种图片类型，将他看做png，svg等同样的存在,可以做为background-image属性的值来使用</p>
    <h3>linear gradients</h3>
    <h2>box shadow</h2>
    <h1>floating and shapes</h1>
    <h2>floating</h2>
    <h3>floated elements</h3>
    <ul>
        关于浮动元素有几个需要注意的事
        <li>尽管浮动元素影响布局，但是它已经脱离了正常流</li>
        <li>
            <p>浮动元素的margin不会合并, 可以看接下来的两段话为什么不在一条线上，就是因为两个p的margin没有合并</p>
            <p style="float: left;width: 20%;">这是浮动的一段话啊 </p>
            <p>这段话可没有浮动哦</p>
        </li>
        <li style="clear: both">对一个非置换元素进行浮动时，必须指定宽度，否则这个元素的宽度会被设置为0</li>
    </ul>
    、 <h3>floating details</h3>
    <p>一个浮动元素会产生一个块盒子，不管它原来是行内元素还是块级元素</p>
    <p>有一系列的规则控制着浮动元素的定位</p>
    <ol>
        <li>浮动元素的outer edge最多只能到容器元素的inner edge，除非使用负margin可以移动到父元素外</li>
        <li>对于两个浮动向左的元素来说，除非第二个元素的头部低于第一个元素的底部，否则第一个元素的右边会和第二个元素的左边紧靠在一起,
            也正是因为这个特性，所以不用担心浮动元素会重写(overwritting)之前的浮动元素，相对于position定位来说，这是一种很安全的方案
        </li>
        <li>向左浮动的元素的right outer edge不可能在一个向右浮动的元素的left outer edge的右边，简单来说也是两个浮动元素不会重叠(overlapping)</li>
        <li>浮动元素的top不会高于父元素的top，浮动元素不可以向上浮动</li>
        <li>一个浮动元素的top永远不能高于这个元素之前的浮动元素或者块元素的top</li>
        <li>浮动元素的top不能高于该元素之前声明的任何元素的行框的top</li>
        <li>多个向左浮动的元素，他们的右边界不能在之后浮动元素的左边界的右边，对于向右浮动的元素同理，空间不够可以挤到下一行</li>
        <li>浮动元素会尽可能高的放置</li>
        <li>左浮动元素必须向左尽可能远，右浮动元素必须向右尽可能远</li>
    </ol>
    <h3>float，content和overlapping</h3>
    <p>当浮动元素和行内元素重叠时，行内元素的内容，border和background会出现在浮动元素之上</p>
    <div>
        <img src="./images/sidebar.png" alt="" style="float: left;margin-right: -100px">
        <span style="border: solid 1px blue;background:red">我是一个行内元素 哈哈哈哈</span>
    </div>
    <p style="clear:both">当浮动元素和块元素重叠式，块元素的内容在浮动元素之上，块元素的border和background子浮动元素之下</p>
    <div>
        <img src="./images/sidebar.png" alt="" style="float: left;margin-right: -100px">
        <p style="border: solid 1px blue;background:red">我是一个块级元素 哈哈哈哈</p>
    </div>
    <h2 style="clear:both">clearing</h2>
    <p>禁止元素的浮动</p>
    <h2>float shapes</h2>
    <h3>creating a shape</h3>
    <p>通过shape可以创建非矩形的区域</p>
    <h1>positioning</h1>
    <h2>basic concepts</h2>
    <h3>types of positioning</h3>
    <dl>
        <dt>static</dt>
        <dd>该元素的盒子会被创建为normal，块级元素创建矩形盒子，并在文件流中，行内元素创建行内盒子</dd>
        <dt>relative</dt>
        <dd>该元素的盒子有一些偏移量,但是该元素的原本位置已经保留</dd>
        <dt>absolute</dt>
        <dd>脱离了文件流，不会对其他元素的布局造成影响，就像不存在这个元素一样，该元素的定位是相对于自己的容器元素</dd>
        <dt>fixed</dt>
        <dd>和absolute是一样的，但是它是相对于viewpoint</dd>
    </dl>
    <h3>containing block</h3>
    <p>对于static和relative类型的非根元素来说，他们的容器块是最近的块级，table-cell或者inline-block元素</p>
    <p>对于absolute的非根元素来说，他们的容器块是最近的非static类型的祖先元素</p>

    <h2>offset property</h2>
    <p>通过top，bottom, left, right属性设置偏亮量，可以是长度也可以是百分比，left和right的百分比相对于容器块元素的width，top和bottom的百分比相对于容器块元素的height</p>
    <p>同时设置了向左和向右的偏移量，只有先声明的会生效，同时设置了上下的偏移量同理</p>
    <h2>width and height</h2>
    <h3>setting width and height</h3>
    <p>在一些情况下，如果对top，bottom，left和right全部设置值之后，该元素的width和height也已会得到默认的设置，在元素的padding，margin，width等属性全部是auto的情况下</p>
    <h3>limiting width and height</h3>
    <p>通过min-width和min-height可以设置元素的content area的最小值，同理适用于max</p>
    <h2>content overflow and clipping</h2>
    <p>不管是出于任何原因，如果一个元素指定了大小，而且内容无法适应，我们就可以通过overflow来控制当前情况</p>
    <p>默认情况是是visible，还有hidden，scroll和auto值</p>




    <h1>transform</h1>
    <p>With CSS transforms, you have a new way to translate elements,and a whole lot more. </p>
    <p>例如旋转图片，或者图片的移动，或者是创建接口（通过翻转元素获取信息）</p>
    <h2>transform functions</h2>
    <img src="./images/transform functions.png" alt="">
    <h3>translation functions</h3>
    <p>A translation transform is just a move along one or more axes</p>
    <p>向右，向下，以及向人的方向是正方向，向左，向上，向内的方向是负方向</p>
    <p>translateX()，translateY()可以使用长度或者百分比值，translateZ()只能用长度值</p>
    <p>translate()是translateX()，translateY()的简写，translate3d()是translateX()，translateY()和translateZ()三个方法的简写</p>
    <h3>scale functions</h3>
    <p>A scale transform makes an element larger or smaller, depending on what value you use.</p>
    <p>通过scale方法可以是一个元素放大和缩小</p>
    <p>scale()是scaleX()和scaleY()的缩写，scale3d()是三个的缩写</p>
    <h3>rotation functions</h3>
    <p>修饰在3d空间内的旋转，一共有rotateX(),rotateY(),rotateZ(),rotate()四个方法，没有rotate3d()</p>
    <p>rotateX是以X为轴旋转，而不是让x轴旋转</p>
    <p>理论上都应是让各轴的正向(X轴向右、Y轴向下、Z轴面向自己)指向自己；</p>
    <p>rotatex、rotatez的旋转正方向是顺时针，rotatey的旋转正方向是逆时针</p>
    <p>但rotate()、rotateZ()，会采用就近转到目标角度原则：</p>
    <ul>
        <li>小于180°，正常顺时针，但大于180°就要注意：例设值200deg，会逆时针转160度完事；</li>
        <li>设180°会逆时针转，-180°才顺时针；</li>
        <li>设360°的倍数值压根转都不转。</li>
        <li>而rotateX() 、 rotateY()这两个，还是会老老实实的转，一度不少，正值顺、负值逆。</li>
    </ul>
    <h3>skew functions</h3>
    <p> When you skew an element, you slant it along one or both of the x- and y-axes. There
        is no z-axis or other 3D skewing</p>
    <p>skew function用于使元素在x或y轴上倾斜，并不能在z轴或者3d情况下倾斜</p>
    <h3>perspective</h3>
    <p>定义 3D 元素距视图的距离，以像素计，定义时的perspective属性，它是一个元素的子元素，透视图，而不是元素本身</p>
    <p>perspective 属性只影响 3D 转换元素</p>
    <h3>matrix</h3>
    <p>matrix的值是6个逗号分隔的数字，代表了transform之后的state，一般很少使用这个属性，他包括了rotation，skew之后的状态</p>
    <h3>transform-origin</h3>
    <p>表示进行transform操作的中心，两个x，y轴的必选值，一个z轴的可选值，x,y轴上可以使用关键字，px或者百分比，z轴只可以使用px</p>
    <h3></h3>

    <h1>transition</h1>
    <p>CSS transition属性允许我们给CSS 属性值从一个值到另一个值的变化添加动画效果，可以是由用户交互触发，也可以是script</p>
    <h2>CSS transition</h2>
    <p>例如背景颜色的变化，css中值的变化基本是瞬时间的变化，而transition可以让这个变化过程变成逐步发生的</p>
    <p>transition由四个属性组成:</p>
    <ul>
        <li>transition-property: specifies the names of the CSS properties you want to transition<br>
         用于明确需要添加效果的属性, 默认值是all，针对所有可以实现动画效果的属性<br>
         只要两个css的状态有变化，那么就会发生变化，对于添加了transition-property的属性来说，只不过是多了更多选项可以控制变化的时间，变化的快慢等
        <pre>
transition-property: all, border-radius, opacity;
transition-duration: 1s, 2s, 3s; 
可以像这样对不同属性分别赋值，创建不同的样式
        </pre></li>
        <li>transition-duration:describe the time it will take to transition from one state to another.过渡经历的时间，可以是s，也可以是ms</li>
        <li>transition-timing-function: provides a way to control the pace of the transition 可以控制过渡的速度节奏，例如先慢后快，或者线快侯曼</li>
        <li>transition-delay:The transition-delay property enables you to introduce a time delay between when the change that initiates the transition is applied to an element, and when the transition begins <br>
        可以添加一个开始某过渡的延时 </li>
    </ul>
    <h2>in reverse: transitioning back to baseline</h2>
    <p>给hover设置了transition后，在鼠标离开指定元素，元素会回到初始状态，回到初始状态的过程是拷贝了从初始状态到hover状态的过渡形式的，例如过渡时间，过渡延迟</p>
    <p>当transition中途被强制结束时，如果有过渡延时，但是在延时结束前鼠标就脱离了元素，就会导致元素立马返回初始状态</p>
    <h2>animatable properties and values</h2>
    <p>判断一个属性是否有过渡效果或者过渡效果的决定因素是看该属性的值是否能被修改，或者存在中间值，例如一个属性的值是top和left他们中间不存在值，但是另一个
        属性的值是deg(30)或者deg(45)，那么这个属性很可能是可以实现动画效果的，因为有中间值，例如deg(40)
    </p>
    <h1>animation</h1>
    <p>With CSS transitions, the start and end states of property values are con‐trolled by existing property values, and provide little control over how things change over time.</p>
    <p>属性值的初始和结束状态值已经由已存在的值决定，css的过渡可以对这些过渡的过程添加一些控制效果，例如过渡时间，过渡延时等</p>
    <p>CSS中的keyframe animation可以让我们决定是否执行动画效果，以及如何重复该动画效果.通过transition可以隐式控制属性值变化，通过animation可以在添加keyframe的帮助下显式控制属性值的变化</p>
    <p>举例来说:transition可以让我们从黑色过渡到白色，我们会经历灰色；但是通过animation，我们可以从黑色过渡到其他颜色，甚至多个颜色，最后再到白色</p>
    <h2>define keyframes</h2>
    <div style="display:flex">
        <div style="width:50%">        <pre>
                @keyframes animation_identifier {
                    keyframe_selector {
                        property: value;
                        property: value;
                    }
                    keyframe_selector {
                        property: value;
                        property: value;
                    }
                }
                
                    </pre></div>
        <div style="width:50%">          <pre>
                @keyframes fadeout {
                    from {
                    opacity: 1;
                    }
                    to {
                    opacity: 0;
                    }
                    }
                    </pre></div>

      
    </div>

    <p>我们定义的animation_identifier将被用于绑定我们想要添加动画效果的元素或者伪元素</p>
    <p>keyfram_selector可以使用百分比或者from和to关键字来表示动画执行的进程, 任何负值，超过100%的百分比，和非关键字都会忽略</p>
    <p>注意:通过keyframe并不能设置动画执行了多长时间，相反，只会用百分比告诉你进程的大致状态</p>
    <h2>setting up keyframe animations</h2>
    <p>the keyword from is equal to 0%, the keyword to is equal to 100%.</p>
    <h3>omitting from and to values</h3>
    <p>当没有0%或者from的keyframe selector的时候，浏览器会使用元素的初始状态创建一个0%时候的状态，对于缺失100%或者to也是一样的，默认值和from一样，都是没有执行动画前的初始值</p>
    <h3>Nonanimatable Properties That Aren’t Ignored</h3>
    <p>没有被忽略的非可动画属性，我们之前提过中间值原则，没有中间值的属性一般不能执行动画效果。有两个特例,visibility和animation-timing-function</p>
    <p>visibility只有hidden和visible，没有中间值但是是一个可执行动画属性</p>
    <p>animation-timing-function实际上不是一个可执行动画的属性，但是他可以保存在某一时间点存在于keyframe selector中的属性值</p>
    <h3>Scripting @keyframes Animations</h3>
    <p>通过appendRule(), deleteRule(), and findRule() methods可以对keyframe进行操作</p>
    <pre>
    // Get the selector and content block for a keyframe
    var aRule = myAnimation.findRule('25%, 75%').cssText;
    // Delete the 50% keyframe
    myAnimation.deleteRule('50%');
    // Add a 53% keyframe to the end of the animation
    myAnimation.appendRule('53% {top: 50%;}');
    </pre>
    <p>一共有三次动画效果事件会触发，animationstart, animationend, 和 animationiteration. 他们会分别在动画执行前，动画执行后，以及当前动画执行结束到下一轮动画执行前的间隙中执行.
            animationiteration只有在多轮动画的时候才会触发，因为不能同时触发animationend, 和 animationiteration两个事件</p>
    <h2>animating elements</h2>
    <p>we’ve included each @keyframe anima‐
        tion identifier in our list of comma-separated values on the animation-name prop‐
        erty. If more than one animation is applied to an element and those animations have
        repeated properties, the later animations override the property values in the earlier
        animations. </p>
    <p>使用逗号隔开的一系列值来添加多个动画，多个动画含有相同属性时，后面的会覆盖前面的</p>
    <h3>naming animations</h3>
    <p>通过设置animation-name可以给不同元素添加动画效果，此时也可以触发animationstart 和 animationend两次事件,但是单单设置animation-name是看不出效果的，必须要设置animation-time属性</p>
    <h3>defining animation length</h3>
    <pre>
        可以给不同的animation设定不同的动画时间
div {
    animation-name: change_bgcolor, round, W;
    animation-duration: 200ms, 100ms, 0.5s;
    }
    </pre>
    <h3>animation-iteration-count</h3>
    <p>表示动画的循环次数，可以是数字也可以是关键字infinite</p>
    <h3>animation-direction</h3>
    <p>控制动画的执行顺序，有四个不同的关键字:</p>
    <ul>
        <li>normal:(default) 默认从0%到100%执行</li>
        <li>reverse:总是从100%向0%执行</li>
        <li>alternate: 奇数循环的时候从0%到100%, 偶数循环的时候从100%到0%</li>
        <li>alternate-reverse: 奇数循环从100%到0%，偶数循环的时候从0%到100%</li>
    </ul>
    <h3>animation-delay</h3>
    <p>控制动画开始之前的延迟时间</p>
    <h3>animation events</h3>
    <p>动画事件，可以用js监听元素的动画事件作出相应的操作</p>
    <pre>
    document.querySelectorAll('li')[3].addEventListener( 'animationend',
    function(e) {
    document.querySelectorAll('li')[4].style.animationName = 'blue';
    },
    false );
    </pre>
    <h3>animation-timing-function</h3>
    <p>和transition非常类似，用于控制变化的速率，先快后慢，先慢后快或者是其他</p>
    <h3>animate-play-state</h3>
    <p>用于控制动画的执行状态，默认值是running，被赋值paused的时候，动画会暂停，重新设置为running会继续执行</p>
    <h3>animation-fill-mode</h3>
    <p>通过该属性可以设置animation是如何在animationstart之前和animated之后影响元素的</p>
    <p>默认值是none，即不对元素添加任何动画效果.添加backwards之后，不需要等待animation-delay立即执行.添加forwards之后，以为着即使动画结束也会保持最后的动画状态</p>
    <h3>bring it together</h3>
    <p>animatition 是多个属性的集合，包含animation-name, animation-duration, animation-timing-function, animation-delay,
        animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state
    </p>
    
</body>

</html>